<%@page import="cn.egame.interfaces.gc.TerminalInfo"%>
<%@page import="cn.egame.interfaces.EnumType.AppParameterType"%>
<%@page import="cn.egame.common.util.Utils"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.util.*"%>
<%@page import="cn.egame.interfaces.pu.AppParameter"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	List<String[]> brandMap = new ArrayList<String[]>();
	if(request.getAttribute("brandList") != null) {
		brandMap = (List<String[]>)request.getAttribute("brandList");	
	}
	
	Set<TerminalInfo> terminalInfoList = new HashSet<TerminalInfo>();
	if(session.getAttribute("terminalInfoList") != null) {
		terminalInfoList = (Set<TerminalInfo>)session.getAttribute("terminalInfoList");	
	}
	
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet"
	href="<%=request.getContextPath()%>/css/main.css" />
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/common.js"></script>
<title>新增机型组</title>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	function isTerminalGroupExist(){
		var exist = true;
		$.ajax({			
			url : "<%=request.getContextPath() + "/tv/terminalgroup/checkExist.do" %>",
			type : 'post',
			data : {
				'name' : $("#name").val(),
				'id' : $("#id").val()
			},
			success:function (data) {
				if (data.retCode == "success" && data.exist=="notExist") {
					exist = false;
				}
			}, 
			error:function () {
				alert("error");
			},
			async : false
		});
		return exist;
	}
	function checkName(){
		var td = $("#form1").find("td[name='notnone']");
		if($(td).find("input").val() == "" || $(td).find("input").val().length>20){
			$(td).find("span").remove();
			$(td).append("<span class='page_tip'>*必填，最多20个汉字字符</span>");
			$(td).find("input").focus();
			return false;
		}else{
			$(td).find("span").remove();
		}
		return true;
	}
	
	function checkRemark(){
		var td = $("#form1").find("td[name='max20']");
		if($(td).find("input").val().length>20){
			$(td).find("span").remove();
			$(td).append("<span class='page_tip'>最多20个汉字字符</span>");
			$(td).find("input").focus();
			return false;
		}else{
			$(td).find("span").remove();
		}
		return true;
	}
	function sub(){
		var ck = checkName() & checkRemark();
		if(ck){
			if(!isTerminalGroupExist()){
				$("#form1").submit();
			}else{
				var td = $("#form1").find("td[name='notnone']");
				$(td).find("span").remove();
				$(td).append("<span class='page_tip'>组名已经存在</span>");
				$(td).find("input").focus;
			}
		}
	}
	
	function back(){
		window.history.back();
	}
	function getTerminal(){
		$.ajax({			
			url : "<%=request.getContextPath() + "/tv/terminalgroup/terminal/getUnrelated.do" %>",
			type : 'post',
			data : {
				'brand' : $("#brand").val(),
				'fromName' : $("#fromName").val()
			},
			success:function (data) {
				if (data && data.retCode == "success") {
					$("#fromTerminal").empty();
					$.each(data.terminalInfoListFilter, function (i, item) {
						$("#fromTerminal").append("<option value='"+item.terminalId+"'>"+item.uacode+"</option>");
					});
				}
			}, 
			error:function () {
				alert("error");
			},
			async : false
		});	
	}
	
	function getTerminalRelated(){
		$.ajax({			
			url : "<%=request.getContextPath() + "/tv/terminalgroup/terminal/getRelated.do" %>",
			type : 'post',
			data : {
				'toName' : $("#toName").val()
			},
			success:function (data) {
				if (data && data.retCode == "success") {
					$("#toTerminal").empty();
					$.each(data.terminalInfoListRelatedFilter, function (i, item) {
						$("#toTerminal").append("<option value='"+item.terminalId+"'>"+item.uacode+"</option>");
					});
				}
			}, 
			error:function () {
				alert("error");
			},
			async : false
		});	
	}
	
	
	function addRelatedTerminal() {	
		checkValue("fromTerminal");				
		$.ajax({			
			url : "<%=request.getContextPath() + "/tv/terminalgroup/terminal/add.do" %>",
			type : 'post',
			data : {
				'terminalIdString' : getOptionValueList("fromTerminal").toString()
			},
			success:function (data) {
				if (data && data.retCode == "success") {
					$("#fromTerminal").empty();
					$("#toTerminal").empty();
					$.each(data.terminalInfoListFilter, function (i, item) {
						$("#fromTerminal").append("<option value='"+item.terminalId+"'>"+item.uacode+"</option>");
					});
					$.each(data.terminalInfoListRelatedFilter, function (i, item) {
						$("#toTerminal").append("<option value='"+item.terminalId+"'>"+item.uacode+"</option>");
					});
				}
			}, 
			error:function () {
				alert("error");
			},
			async : false
		});	
		getTerminal();
		getTerminalRelated();
	}
	
	function deleteRelatedTerminal() {	
		checkValue("toTerminal");				
		$.ajax({			
			url : "<%=request.getContextPath() + "/tv/terminalgroup/terminal/del.do" %>",
			type : 'post',
			data : {
				'terminalIdString' : getOptionValueList("toTerminal").toString()
			},
			success:function (data) {
				if (data && data.retCode == "success") {
					$("#fromTerminal").empty();
					$("#toTerminal").empty();
					$.each(data.terminalInfoList, function (i, item) {
						$("#fromTerminal").append("<option value='"+item.terminalId+"'>"+item.uacode+"</option>");
					});
					$.each(data.terminalInfoListRelated, function (i, item) {
						$("#toTerminal").append("<option value='"+item.terminalId+"'>"+item.uacode+"</option>");
					});
				}
			}, 
			error:function () {
				alert("error");
			},
			async : false
		});		
		getTerminal();
		getTerminalRelated();
	}
	
	function checkValue(terminalIds){
		terminalIdsValue = getOptionValueList(terminalIds);
		
		if(terminalIdsValue == null || terminalIdsValue == ""){
			alert("请选择机型");
			return;
		}
	}
	
	function getOptionValueList(selectId){
		var options = document.getElementById(selectId);
		var result = new Array();
		for(var i=0;i<options.length;i++){
			if(options[i].selected == true){
				result.push(options[i].value);
			}
		}
		return result;
	}
	
</script>
</head>
<body>
	<form action="<%=request.getContextPath() + "/tv/terminalgroup/set.do"%>"
		method="post" id="form1">
		<div class="matter_box">
			<h3 class="nopoint"><strong>TV产品&gt;机型组管理&gt;新增机型组</strong></h3>
			<div class="mt10 pt10 clearfix">
				<table>
					<tr>
						<td style="text-align: right" width="200px">机型组名称:</td>
						<td name="notnone" style="text-align: left">
							<input type=text name="name" id="name" maxlength="20">
						</td>
					</tr>
					<tr>
						<td style="text-align: right" width="200px">备注:</td>
						<td name="max20" style="text-align: left">
							<input type=text name="remark" id="remark" maxlength="20">
						</td>
					</tr>
				</table>
				<div style="height: 20px"></div>
				<table>
					<tr>
						<td>
							<div style="width: 400px; height: 400px; border: 1px solid silver">
								<h3 class="nopoint"><strong>未关联机型组</strong></h3>
								<div class="mt10 pt10 clearfix">
									<table>
										<tr>
											<td style="text-align: right;">品牌：</td>
											<td>
												<select name="brand" id="brand" style="width: 150px;">
													<option value="0">请选择</option>
													<%  if(brandMap != null){          					
									          				for(String[] brand:brandMap) { 
									       						if(brand.length==3){
									       			%>          					
									       					<option value="<%=brand[0] %>"><%=brand[1] %>-<%=brand[2] %></option>
								          			<%	
								          						}}
									          			}
								          			%>
												</select>
											</td>
										</tr>
										<tr>
											<td style="text-align: right;">客户端UA：</td>												
											<td><input type=text name="fromName" id="fromName" style="width: 150px;"></td>
										</tr>
										<tr>
											<td></td>
											<td>
												<input class="btn2" type="button" value="查询" onclick="getTerminal()">
											</td>
										</tr>
										<tr>
											<td colspan="2">
												<select id = "fromTerminal" name = "fromTerminal" multiple="multiple" size=15 style="width: 240px">
														<%
															if(terminalInfoList != null){
																for(TerminalInfo bean:terminalInfoList){
																	%>																		
																	<option value="<%=bean.getTerminalId() %>" >
																		<%=bean.getUACode() %></option>
																	<%
																	}
																}
															%>
												</select>
											</td>
										</tr>
									</table>
								</div>
							</div>
						</td>
						<td>
							<input type=button value="添加 >" class="btn3"  onclick="addRelatedTerminal()"> <br/>
							<input type="button" class="btn3" onclick="deleteRelatedTerminal()" value="< 删除"><br/>
						</td>
						<td>
							<div style="width: 400px; height: 400px; border: 1px solid silver">
								<h3 class="nopoint"><strong>已关联机型组</strong></h3>
								<div class="mt10 pt10 clearfix">
									<table>
										<tr>
											<td style="text-align: right;">客户端UA：</td>
											<td><input type=text name="toName" id="toName"></td>
										</tr>
										<tr>
											<td></td>
											<td>
												<input type="button" class="btn2" value="查询" onclick="getTerminalRelated()">
											</td>
										</tr>
										<tr>
											<td colspan="2">
												<select id = "toTerminal" name = "toTerminal" multiple="multiple" size="15" style="width: 240px;">
												</select>
											</td>
										</tr>
									</table>
								</div>
							</div>
						</td>
					</tr>
				</table>
				<div style="text-align: center;">
					<input type="button" value="确定" onclick="sub()" class="btn2">
					<input type="button" value="返回" onclick="back()" class="btn2">
				</div>
			</div>
		</div>
	</form>
</body>
</html>